<template>
    <div>
        <div class="banner">
            <div class="img-span">
                <img src="../img/尖括号-左.png" alt="">
            </div>
            <h2>热门车型</h2>
        </div>
        <div class="bobyOne">
            <div v-for="p in carList" :key="p.id" class="carSomes" @click="xiangqingye(p)">
                <img :src="p.src" alt="">
                <div>{{ p.name }}</div>
                <div class="priceStyle">{{ p.price }}</div>
                <span>{{ p.automatic }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{ p.displacement }}</span>
                <div class="fontStyle">{{ p.space }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
    name: 'CarList',
    data() {
        return {
            carList: [
                { id: nanoid(), src: require('../img/car2.png'), name: '小型轿车 | 奥迪A6', price: '317 / 天', automatic: '自动挡', displacement: '1.4L', space: '空间较大，乘坐舒服' },
                { id: nanoid(), src: require('../img/car3.png'), name: '小型轿车 | 奥迪A6', price: '455 / 天', automatic: '自动挡', displacement: '1.4L', space: '空间较大，乘坐舒服' },
                { id: nanoid(), src: require('../img/car4.png'), name: '小型轿车 | 奥迪A6', price: '600 / 天', automatic: '自动挡', displacement: '1.4L', space: '空间较大，乘坐舒服' },
                { id: nanoid(), src: require('../img/car5.png'), name: '小型轿车 | 奥迪A6', price: '456 / 天', automatic: '自动挡', displacement: '1.4L', space: '空间较大，乘坐舒服' },
                { id: nanoid(), src: require('../img/car6.png'), name: '小型轿车 | 奥迪A6', price: '378 / 天', automatic: '自动挡', displacement: '1.4L', space: '空间较大，乘坐舒服' },
                { id: nanoid(), src: require('../img/car7.png'), name: '小型轿车 | 奥迪A6', price: '678 / 天', automatic: '自动挡', displacement: '1.4L', space: '空间较大，乘坐舒服' },
                { id: nanoid(), src: require('../img/fast-car3.jpg'), name: '小型轿车 | 奥迪A6', price: '567 / 天', automatic: '自动挡', displacement: '1.4L', space: '空间较大，乘坐舒服' },
                { id: nanoid(), src: require('../img/car4.png'), name: '小型轿车 | 奥迪A6', price: '666 / 天', automatic: '自动挡', displacement: '1.4L', space: '空间较大，乘坐舒服' },
                
            ]
        }
    },
    methods: {
        xiangqingye(p) {
            this.$router.push({
                name: 'xiangqing',
                query: {
                    id: p.id,
                    src: p.src,
                    price: p.price,
                    name: p.name
                }
            })
        }
    }
}
</script>

<style scoped>
h2 {
    margin-left: 10px;
}

.banner {
    display: flex;
}

.img-span {
    width: 30px;
    height: 30px;
    outline: 1px solid black;
    border-radius: 50%;
    position: relative;
    margin-left: 20px;
    top: 20px;
    transition: all .5s;
    cursor: pointer;
}

.img-span:hover {
    transform: rotate(180deg);
}

.img-span img {
    width: 100%;
    height: 100%;
}

.carSomes:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.priceStyle {
    width: 40%;
    margin: auto;
    color: rgb(249, 249, 249);
    background: rgb(227, 165, 7);
    border-radius: 5px;
}

.fontStyle {
    font-size: 10px;
    color: rgb(250, 229, 4);
}

.bobyOne {
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.carSomes {
    text-decoration: none;
    cursor: pointer;
    transition: all 0.6s;
    width: 200px;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    background: rgb(253, 249, 249);
}

.carSomes img {
    width: 200px;
}
</style>